<template>
  <div style="margin: auto;">

      <el-form
          :rules="rules"
          label-width="60px"
          ref="dom"
          :model="checkAdmin"
          status-icon
          style="width: 366px;margin: auto;padding-top: 180px"
    >
        <el-form-item label="ID :" prop="id" >
          <el-input v-model="checkAdmin.id" type="text"/>
        </el-form-item>

        <el-form-item label="密码 :" prop="password">
          <el-input v-model="checkAdmin.password" type="password"/>
        </el-form-item>

        <el-form-item prop="remember">
          <el-checkbox v-model="checkAdmin.remember" label="免登录"></el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button :plain="true" type="primary" @click="submit(dom)"
          >登录</el-button
          >
          <el-button @click="reset(dom)">重置</el-button>

        </el-form-item>
      </el-form>


  </div>

</template>



<script setup>

import {reactive, ref, watch} from 'vue'
import request from "@/utils/request";
import md5 from "js-md5"
import {message} from "ant-design-vue";
import 'ant-design-vue/dist/antd.css'
import {useRouter} from "vue-router/dist/vue-router";
import Cookies from 'js-cookie'


const dom=ref()
const router = useRouter()

const checkAdmin = reactive({
  id:'',
  password: '',
  remember:false
})

const validateId = (rule, value) => {
  let re=/^\d+$/g
  if (value==='')
    return Promise.reject("ID不能为空")
  else if (!re.test(value))
    return Promise.reject("ID格式不正确")
  else
    return Promise.resolve()

}

const validatePassword = (rule, value) => {
  let re=/^(?!\d+$)(?![a-z]+$)[\da-z]+$/i
  if (value==='')
    return Promise.reject("密码不能为空")
  else if (!re.test(value))
    return Promise.reject("密码格式不正确")
  else
    return Promise.resolve()
}

const rules = reactive({
  id:[{validator: validateId, trigger: 'change'}],
  password:[{validator: validatePassword, trigger: 'change'}]
})

const submit = (dom) => {
  dom.validate((isTrue)=>{
    if (isTrue){
      checkAdmin.password=md5(checkAdmin.password)
      request.post("/admin/check",checkAdmin).then(response=>{
        console.log(response)
        if (response.status===200) {
          if (!response.data.remember){
            sessionStorage.setItem("blog-token",response.data.token)
            Cookies.set("blog-login-in-free","session")
          }
          else{
            localStorage.setItem("blog-token",response.data.token)
            Cookies.set("blog-login-in-free","local",{expires:1})
          }
          router.push("/admin")
        }
        else{
          message.warning('登陆失败!');
          return Promise.reject("登陆失败")
        }
        console.log(sessionStorage.getItem("blog-token"))
        console.log(localStorage.getItem("blog-token"))
      })
    }else {
      console.log("账号密码有误")
    }
  })
}

const reset = (dom) => {
  console.log(dom)
  return dom.resetFields()
}

// watch(
//     ()=>checkAdmin.password,
//     (nowValue,oldValue)=>{
//
//     }
// )
//
// watch(
//     ()=>checkAdmin.id,
//     (nowValue,oldValue)=>{
//
//     }
// )







</script>

